<template>
    <div class="top" :style="{backgroundImage:`url(${list.avatar})`}">
        <div class="mask"></div>
        <img :src="list.avatar" alt="">
        <div>
            <p class="p1"><span>品牌</span>
                {{ list.name}}
            </p>
            <p class="p2">{{ list.description }}</p>
            <span class="sp1">减</span>
            <span class="sp2">
               <!-- {{ list.supports[0].description }} -->
               {{description}}
            </span>
            <p class="p3">{{ length }}个  ></p>
        </div>

        <div class="notice">
        <span>公告</span>
        <span>{{ list.bulletin }}</span>
        <p> > </p>
    </div>
    </div>

    <!-- <div class="notice">
        <span>公告</span>
        <span>{{ list.bulletin }}</span>
        <p> > </p>
    </div> -->

    <div class="main">
        <ul class="title" >
            <li class="active">
                <router-link to="/">商品</router-link>
            </li>
            <li>
                <router-link to="/assess">评价</router-link>
            </li>
            <li>
                <router-link to="/store">商家</router-link>
            </li>
        </ul>
        
        <div class="tab">
            <router-view></router-view>
        </div>

        
    </div>

</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            list: [],
            show: false,
            carList: [],
        }
    },
    computed:{
        description(){
            // list.supports[0].description
            let str = '';
            if(this.list.name!==undefined){
                str = this.list.supports[0].description
            }
            return str ;
        },
        length(){
            // list.supports[0].description
            let len = 0;
            if(this.list.name!==undefined){
                len = this.list.supports.length
            }
            return len ;
        }
    },


    created() {
        this.getData()
    },
    methods: {
        async getData() {
            const { data } = await axios.get("http://localhost:8088/list")
            // console.log(data)
            this.list = data.seller
            console.log(this.list)

        },
    },

}
</script>

<style scoped>
*{
    margin: 0;padding: 0;
}

ul,ol,li{
    list-style: none;
}
body,html{
    width: 100%;
    height: 100%;
    position: relative;
}

img{
    width: 100%;
    height: 100%;
    display: block;
}
.top{
    height: 32.8vw;
    overflow: hidden;
    position: relative;
}
.top>.mask{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(7, 17, 27, 0.4);
    backdrop-filter: blur(10px);
    /* z-index: 1; */
}
.notice{
    height: 7.467vw;
    background: rgba(7, 17, 27, 0.3);
    margin-top: 3.733vw;
}
.top>img{
    width: 17.067vw;
    height: 17.067vw;
    margin: 4.8vw 4.267vw 0vw 4.8vw;
    float: left;
    position: relative;
    z-index: 1;
}
.top>div{
    position: relative;
    z-index: 1;
}
.top .p1{
    font-size: 4.267vw;
    color: white;
    margin-top: 4vw;
}
.top .p1>span{
    width: 4vw;
    height: 4vw;
    background: red;
    font-size:4vw;
    font-weight: bold;
    padding: 0.4vw;
}
.top>div>.p2{
    font-size: 3.2vw;
    color: rgba(255, 255, 255 , 0.5);
    padding: 1.6vw 0 1.867vw 0;
}
.top>div>.sp2{
    /* font-size: 3.2vw; */
    color: rgba(255, 255, 255 , 0.5);
    padding-left: 2.667vw;
}
.top>div>.sp1{
    width: 2.133vw;
    height: 2.133vw;
    color: red;
    background: white;
    
    padding: 0 0.533vw;
}
.top>div>.p3{
    width: 10.667vw;
    height: 6.4vw;
    line-height: 6.4vw;
    font-size: 2.667vw;
    color: white;
    background: rgba(7, 17, 27, 0.5);
    border-radius: 20%;
    text-align: center;
    float: right;
    margin-right: 3.2vw;
}
.notice{
    display: flex;
}
.notice>span{
    text-align: center;
    
}
.notice>span:nth-child(1){
    width: 7vw;
    height: 4vw;
    font-size: 1.867vw;
    font-weight: bold;
    background: white;
    margin: 2vw 1.067vw 0  3.2vw;
    float: left;
}

.notice>p{
    width: 3vw;
    height: 3vw;
    /* background: orange; */
    text-align: center;
    float: right;
    color: rgba(255, 255, 255 , 0.6);
    margin-right: 3.2vw;
    line-height: 2.667vw;
    font-size: 3.2vw;
    margin-top: 1.2vh;
}
.notice>span:nth-child(2){
    /* flex: 1; */
    width: 80vw;
    font-size: 2.667vw;
    color: rgba(255, 255, 255 , 0.6);
    line-height: 7.467vw;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    
}
.main{
    height: 132vw;
    overflow: hidden;
}
.main>.title{
    height: 10.667vw;
    /* background: rgb(255, 255, 255); */
    /* background: yellow; */
    font-size: 3.733vw;
    color: rgb(77, 85, 93);
    display: flex;
    justify-content: space-around;
    text-align: center;
    height: 10.667vw;
    border-bottom: 1px solid gray;
}
.main>.title>li{
    height: 10.667vw;
    line-height: 10.667vw;
}
.main>.title>li:active{
    color: rgb(240, 20, 20);
}
.bottom{
    width: 100%;
    height: 13.333vw;
    /* background: #141d27; */
    background: black;
    position: relative;
    position: fixed;
    left: 0;
    bottom: 0;
}
.tab{
    flex: 1;
    background: red;
    overflow: hidden;
}

.bottom img{
    width: 6.667vw;
    height: 6.667vw;
    border: 1.6vw solid black;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    padding: 1.333vw;
    margin-right: 4.8vw;
    float: left;
    position: absolute;
    left: 4.8vw;
    top: -2.667vw;
}
.bottom img:active{
    background: deepskyblue;
}
.bottom span{
    font-size: 3.2vw;
    color: gray;
    line-height: 13.333vw;
}
.bottom span:nth-child(1){
    padding-left: 24vw;
    padding-right: 3.2vw;
    font-size: 4.267vw;
    font-weight: 700;
    border-right: 0.133vw solid gray;
    margin-right: 3.2vw;

}
.bottom span:nth-child(3){
    /* float: right; */
    width: 30%;
    height: 100%;
    font-size: 3.733vw;
    font-weight: 700;
    float: right;
    background: rgba(255,255,255,0.3);
    text-align: center;
}

.showCart{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.showCart .mask{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(7, 17, 27, 0.6);
    backdrop-filter: blur(10px);
}
</style>